<template>
  <div>
    <div class="box" 
    v-if="productList.length > 0"
    v-for="(item,index) in productList"
    :key="index"
    >
      <router-link :to="{name:'Details',params:{goodsid:item.goodsId}}">
        <img :src="item.goodsPic" alt=""> 
        <div class="text">
          <h3>{{ item.topicTitle }}</h3> 
          <div class="text-box">
            <img :src="item.headPic" alt="">
            <span class="username">{{ item.topicWriter }}</span>
            <p class="like"><i class="iconfont">&#xe659;</i> {{ item.collectNum }}</p>
          </div>
        </div>
      </router-link>
    </div>
    <div v-else>数据正在加载中...</div>
  </div>
</template>

<script>
export default { 
  name:"Product",
  data(){
    return{
      
    }
  },
  props:{
    productList:{
      type:Array
    }
  }
}
</script>

<style scoped>
.box{
    width: 4.555rem;
    height: 4.64rem;
    float: left;
    margin-left: 0.297rem;
    background-color: #fff;
    box-shadow: 0.08rem 0.08rem 0.133rem rgba(0,0,0,0.1);
    padding-bottom: 0.05rem;
    border-radius: 0.134rem;
    margin-bottom: -0.267rem;
    margin-top: 0.467rem;
  }
  .box img{
    width: 100%;
    height: 75%;
  }
  .text{
    padding: 0.107rem 0.16rem;
    box-sizing: border-box;
  }
  .text h3{
    font-weight: normal;
    color: #808080;
    font-size: 0.24rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap  
  }
  .text-box{
    margin-top: 0.133rem;
  }
  .text img{
    width: 0.4rem;
    float: left;
  }
  .username{
    margin-left: 0.133rem;
    font-size: 0.24rem;
    color: #808080;
    display: block;
    float: left;

  }
  .like{
    margin-top: 0.133rem;
    float: right;
    color: #808080;
    font-size: 0.24rem;
  }
  .like .iconfont{
    font-size: 0.24rem;
  }
</style>
